<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <%--引入vue的js--%>
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <%--引入element的js--%>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="/js/axios.min.js"></script>
    <%--引入elementui的样式--%>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
</head>
<body>
<div  id="app">
    <el-form :inline="true" :model="bookVo" class="demo-form-inline">
    <el-form-item label="图书名称" >
        <el-input v-model="bookVo.bookName" placeholder="请输入图书名称"></el-input>
    </el-form-item>
    <el-form-item label="图书作者">
        <el-input v-model="bookVo.bookAuthor" placeholder="图书作者"></el-input>
    </el-form-item>
    <el-form-item label="选择类型" prop="booktypeId">
        <el-select v-model="bookVo.booktypeId" placeholder="选择类型">
            <el-option v-for="b in booktypes1" :label="b.booktypes"  :key="b.booktypeId" :value="b.booktypeId"></el-option>
        </el-select>
    </el-form-item>
    <el-form-item>
        <el-button type="primary" @click="search">搜索</el-button>
        <el-button type="success" icon="el-icon-refresh" @click="reset">重置</el-button>
        <el-button type="warning" icon="el-icon-plus" @click="addShow">添加</el-button>
    </el-form-item>
    </el-form>
    <el-table
            :data="books"
            border
            style="width: 100%">
        <el-table-column
                prop="bookId"
                label="图书编号"
        >
        </el-table-column>
        <el-table-column
                prop="bookName"
                label="图书名称"
        >
            <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                    <p>图书描述: {{ scope.row.bookDescribe }}</p>
                    <div slot="reference" class="name-wrapper">
                        {{ scope.row.bookName }}
                      </div>
                </el-popover>
            </template>
        </el-table-column>
        <el-table-column
                prop="bookAuthor"
                label="图书作者">
        </el-table-column>
        </el-table-column>
        <el-table-column
                prop="bookPrice"
                label="图书价格">
        </el-table-column>
        <el-table-column
                prop="booktype.booktypes"
                label="图书类型">
        </el-table-column>
        <el-table-column
                prop="bookCount"
                label="图书数量">
        </el-table-column>
        <el-table-column
                prop="bookIco"
                label="图书图片">
            <template slot-scope="scope">
                <img style="width: 140px;height: 70px" :src="scope.row.bookIco">
            </template>
        </el-table-column>
        <el-table-column
                type="Info"
                fixed="right"
                label="操作"
                width="180">
            <template slot-scope="scope">
                <el-button @click="delShow(scope.row)" type="danger" size="small">删除</el-button>
                <el-button @click="editShow(scope.row)" type="primary" size="small">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>
    <%--    添加图书信息对话框--%>
    <el-dialog title="添加图书信息" :visible.sync="dialogFormVisible" width="40%">
                <el-form :model="addForm" :rules="addRules" ref="formRef">
                    <el-form-item label="图书名称" label-width="80" prop="bookName">
                        <el-input v-model="addForm.bookName" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="图书作者" :label-width="80+''" prop="bookAuthor">
                        <el-input v-model="addForm.bookAuthor" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="图书描述" :label-width="80+''" prop="bookDescribe">
                        <el-input v-model="addForm.bookDescribe" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="发布日期" :label-width="80+''" prop="bookRedate">
                        <div class="block">
                            <span class="demonstration"></span>
                            <el-date-picker
                                    v-model="addForm.bookRedate"
                                    type="date"
                                    placeholder="选择发布日期">
                            </el-date-picker>
                        </div>
                    </el-form-item>
                    <el-form-item label="图书价格" :label-width="80+''" prop="bookPrice">
                        <el-input v-model.number="addForm.bookPrice" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="图书类型" :label-width="80+''" prop="booktyId">
                        <el-select v-model="addForm.booktypeId" placeholder="请选择图书类型">
                            <el-option v-for="b in booktypes1" :label="b.booktypes" :key="b.booktypeId" :value="b.booktypeId"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="图书数量" :label-width="80+''" prop="bookCount">
                        <el-input v-model.number="addForm.bookCount" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="图书图片" :label-width="80+''" prop="bookIco" >
                        <el-upload
                                class="avatar-uploader"
                                action="/upLoad/image"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addBook">确 定</el-button>
        </div>
    </el-dialog>
    <%--    修改图书信息对话框--%>
    <el-dialog title="修改图书信息" :visible.sync="dialogFormVisible2" width="40%">
        <el-form :model="editForm" :rules="addRules" ref="formRef">
            <el-form-item label="图书名称" label-width="80" prop="bookName">
                <el-input v-model="editForm.bookName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="图书作者" :label-width="80+''" prop="bookAuthor">
                <el-input v-model="editForm.bookAuthor" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="图书描述" :label-width="80+''" prop="bookDescribe">
                <el-input v-model="editForm.bookDescribe" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="发布日期" :label-width="80+''" prop="bookRedate">
                <div class="block">
                    <span class="demonstration"></span>
                    <el-date-picker
                            v-model="editForm.bookRedate"
                            type="date"
                            placeholder="选择发布日期">
                    </el-date-picker>
                </div>
            </el-form-item>
            <el-form-item label="图书价格" :label-width="80+''" prop="bookPrice">
                <el-input v-model.number="editForm.bookPrice" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="图书类型" :label-width="80+''" prop="booktyId">
                <el-select v-model="editForm.booktypeId" placeholder="请选择图书类型">
                    <el-option v-for="b in booktypes1" :label="b.booktypes" :key="b.booktypeId" :value="b.booktypeId"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="图书数量" :label-width="80+''" prop="bookCount">
                <el-input v-model.number="editForm.bookCount" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="图书图片" :label-width="80+''" prop="bookIco">
                        <el-image
                                style="width: 100px; height: 100px"
                                :src="editForm.bookIco"
                                @click="clickImage"
                              ></el-image>
                <el-upload
                        hidden
                        ref="upload"
                        @click="handleClick"
                        :background="editForm.bookIco"
                        class="avatar-uploader"
                        action="/upLoad/image"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="editBook">确 定</el-button>
        </div>
    </el-dialog>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
</div>
<script>
    let app=new Vue({
        el: "#app",
        data: {
            bookImg:'',
            //添加对话框
            dialogFormVisible:false,
            //修改对话框
            dialogFormVisible2:false,
            //添加表单内容
            addForm: {},
            //修改表单内容
            editForm:{},
            oldEditfrom:{},
            //搜索表单对象
            bookVo: {},
            //图书表格的数据
            books: [],
            //当前的页码
            current: 1,
            //每页的条数
            pageSize: 5,
            //总条数
            total: 0,
            //所有图书类型的信息
            booktypes1: [],
            imageUrl:'',
            //添加表单校验规则
            addRules: {
                bookName: [
                    {required: true, message: '请输入图书名称', trigger: 'blur'},
                ],
                bookAuthor: [
                    {required: true, message: '请输入图书作者', trigger: 'blur'},
                ],
                bookDescribe: [
                    {required: true, message: '请输入图书描述', trigger: 'blur'},
                ],
                bookPrice:[
                    {required: true, message: '请输入图书价格', trigger: 'blur'},
                    {type: 'number', message: '价格必须为数字值'}],
                booktypeId: [
                    {required: true, message: '请输入图书类型', trigger: 'blur'},
                ],
                bookCount: [{required: true, message: '请输入图书数量', trigger: 'blur'},
                    {type: 'number', message: '价数量必须为数字值'}
                ],
                bookIco: [
                    {required: true, message: '请添加图书图片', trigger: 'blur'}
                ],

            },

        },
        created(){
            this.loadBook();
            this.loadBookType();
        },
        methods:{
            handleClick(){
                console.log("handleClick方法执行了")
                console.log(this)
                this.$refs.upload.$el.querySelector('input').click()
            },
            //图片点击事件
            clickImage(){
                this.handleClick()
            },
            //上传图片成功
            handleAvatarSuccess(res, file) {
                console.log("上传图片成功")
                console.log(res)
                this.imageUrl = URL.createObjectURL(file.raw);
                this.addForm.bookIco=res.data
                this.editForm.bookIco=res.data

            },
            //图片限制
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            handleRemove(file, fileList) { //删除
                this.httpRequestImg = false;
                console.log(file, fileList);
            },
            //页面显示数据条数改变重新渲染数据
            handleSizeChange(val) {
                this.pageSize=val;
                this.loadBook();
            },
            //页码改变重新渲染数据
            handleCurrentChange(val) {
                this.current=val;
                this.loadBook();
            },

            //取消添加对话框
            cancel(){
                console.log("取消操作完成了")
                this.editForm=this.oldEditfrom
                this.dialogFormVisible2=false
            },
            //重置按钮
            reset(){
                this.bookVo.bookName=""
                this.bookVo.bookAuthor=""
                this.bookVo.booktypeId=""
                this.loadBook()
            },
            //点击添加按钮
            addShow(){
                this.dialogFormVisible=true;
            },
            //点击修改按钮
            editShow(row){
                this.dialogFormVisible2=true;
                this.oldEditfrom=row
                this.editForm=JSON.parse(JSON.stringify(row))
            },
            //搜索事件
            search(){
                this.current=1;
                this.loadBook()
            },
            //初始化图书类型表格数据
            loadBookType(){
                axios.get("/book/booktype").then(result=>{
                    this.booktypes1=result.data.data;
                })
            },
            //初始化图书表格数据
            loadBook(){
                axios.post("/book/list/"+this.current+"/"+this.pageSize,this.bookVo).then(result=>{
                    this.books=result.data.data.list;
                    this.total=result.data.data.total;
                })
            },
            //添加确认按钮
            addBook(){
                //调用后台添加图书接口
                this.$refs.formRef.validate((valid) => {
                    if (valid) {
                        //调用后端接口
                        axios.post("/book/add",this.addForm).then(result=>{
                            if (result.data.code===200) {
                                //重置表单
                                this.$refs.formRef.resetFields();
                                //关闭对话框
                                this.dialogFormVisible = false;
                                //响应消息
                                this.$message.success(result.data.msg);
                                this.imageUrl="";
                                //重新加载表格
                                this.loadBook();
                            }
                        })
                    }else {
                        return false;
                    }
                })
            },
            //编辑确认按钮
            editBook(){
                //调用后台修改图书接口
                this.$refs.formRef.validate((valid) =>{
                    if (valid) {
                        //调用后端接口
                        axios.post("/book/update",this.editForm).then(result=>{
                            if(result.data.code===200){
                                //重置表单
                                this.$refs.formRef.resetFields();
                                //关闭对话框
                                this.dialogFormVisible2=false;
                                this.imageUrl="";
                                //响应消息
                                this.$message.success(result.data.msg);
                                //重新加载表格
                                this.loadBook()
                            }
                        })
                    } else {
                        alert('error submit!!');
                        return false;
                    }
                })
            },
            //删除图书
            delShow(row){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //调用后端接口
                    axios.post("/book/del/" + row.bookId).then(result => {
                        if (result.data.code===200) {
                            //重新加载表格
                            this.loadBook();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
        },
    })
</script>
</body>
</html>
